<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date A Ruri</title>
    <link rel="stylesheet" href="style.css">
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']],
                processEscapes: true,
                processEnvironments: true
            },
            options: {
                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
            }
        };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
    <div class="floating-title">
        <h1><span class="emoji">✨</span> <span class="name">一行瑠璃</span> <span class="emoji">✨</span></h1>
    </div>
    <div class="chat-app">
        <main class="chat-messages" id="chat-messages"></main>
        <footer class="chat-input-area">
            <input type="text" id="user-input" placeholder="与瑠璃聊天...(≧∇≦)ﾉ" autocomplete="off">
            <button id="send-button" aria-label="Send">
                <img src="tele.svg" alt="Send">
            </button>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>